import React, { useState, useEffect } from 'react';
import './AlgorithmsPage.css';

function AlgorithmsPage() {
    const [algorithms, setAlgorithms] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch('http://sg.neuq.org:7788/api/algorithms')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Failed to fetch algorithms');
                }
                return response.json();
            })
            .then(data => {
                setAlgorithms(data);
                setLoading(false);
            })
            .catch(err => {
                setError(err.message);
                setLoading(false);
            });
    }, []);

    if (loading) {
        return <div className="algorithms-container">Loading...</div>;
    }

    if (error) {
        return <div className="algorithms-container">Error: {error}</div>;
    }

    return (
        <div className="algorithms-container">
            <h1>Available Algorithms</h1>
            <table className="algorithms-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Mode</th>
                        <th>Revision</th>
                    </tr>
                </thead>
                <tbody>
                    {algorithms.map(algorithm => (
                        <tr key={algorithm.id}>
                            <td>{algorithm.id}</td>
                            <td>{algorithm.name}</td>
                            <td>{algorithm.mode}</td>
                            <td>{algorithm.revision}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

export default AlgorithmsPage; 